<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="快捷键" name="1">
      <el-card class="box-card">
        <view class="row">
          <view class="block1">OA</view>
          <view class="block2">ERP</view>
          <view class="block3">NA</view>
          <view class="block4">NA</view>
        </view>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="数据面板" name="2">
      <div class="row1">
        <div ref="chartRef1" style="width: 600px; height: 400px;"></div>
        <div ref="chartRef2" style="width: 600px; height: 400px;"></div>
      </div>
      <div class="row1" style="margin-top: 10px; padding-top: 50px;">
        <div ref="chartRef3" style="width: 600px; height: 400px;"></div>
        <div ref="chartRef4" style="width: 600px; height: 400px;"></div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="其他" name="3">其他</el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import {onMounted, onBeforeUnmount, ref} from 'vue'
import useUserStore from '@/store/modules/user';
import * as echarts from 'echarts'
let activeName = ref('1')
let userStore = useUserStore()
// 柱状图1
const chartRef1 = ref(null)
const handleClick = (tab:any, event:any) => {
  console.log(tab, event);
}
let chartInstance1:any = null
const initChart1 = () => {
  if (chartRef1.value) {
    chartInstance1 = echarts.init(chartRef1.value)
    const option = {
      title: {
        text: '这是一个标题' // 图表标题
      },
      tooltip: {}, // 默认提示框配置
      legend: {
        data: ['销量'],
        bottom: '12%'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
      },
      yAxis: {}, // Y 轴默认配置
      series: [
        {
          name: '销量', // 系列名称
          type: 'bar', // 图表类型为柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据值
        }
      ],
      grid: {
        top: '10%',
        bottom: '20%',
        containLabel: true
      },
    }
    chartInstance1.setOption(option)
  }
}
// 柱状图2
const chartRef2 = ref(null)
let chartInstance2:any = null
const initChart2 = () => {
  if (chartRef2.value) {
    chartInstance2 = echarts.init(chartRef2.value)
    const option = {
        title: {
        text: 'World Population'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        bottom: '12%'
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          name: '2011',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
          name: '2012',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
      ],
      grid: {
        top: '20%',
        bottom: '20%',
        containLabel: true
      },
    }
    chartInstance2 && chartInstance2.setOption(option);
  }
}
// 饼图
const chartRef3 = ref(null)
let chartInstance3:any = null
const initChart3 = () => {
  if (chartRef3.value) {
    chartInstance3 = echarts.init(chartRef3.value)
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'center',
        top: '15%'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '45%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chartInstance3 && chartInstance3.setOption(option);
  }
}
const chartRef4 = ref(null)
let chartInstance4:any = null
const initChart4 = () => {
  if (chartRef4.value) {
    chartInstance4 = echarts.init(chartRef4.value)
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '15%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    chartInstance4 && chartInstance4.setOption(option);
  }
}
const resizeChart = () => {
  chartInstance1?.resize()
  chartInstance2?.resize()
  chartInstance3?.resize()
  chartInstance4?.resize()
}

onMounted(() => {
  initChart1()
  initChart2()
  initChart3()
  initChart4()
  window.addEventListener('resize', resizeChart)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance1?.dispose() // 销毁 echarts 实例
  chartInstance2?.dispose()
})
</script>
<style lang="scss" scoped>
.row1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40vh;
  div {
    width: 50%;
  }
}
.block1 {
  background-image: url('https://img1.baidu.com/it/u=2711830633,99848570&fm=253&fmt=auto&app=138&f=JPEG');
  width: 23%;
  height: 130px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 130px;
  cursor: pointer;
}
.block2 {
  background-image: url('https://img2.baidu.com/it/u=3043608692,975593221&fm=253&fmt=auto&app=138&f=JPEG');
  width: 23%;
  height: 130px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 130px;
  cursor: pointer;
}
.block3 {
  background-image: url('https://img1.baidu.com/it/u=3476588421,1513652656&fm=253&fmt=auto&app=138&f=JPEG');
  width: 23%;
  height: 130px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 130px;
  cursor: pointer;
}
.block4 {
  background-image: url('https://img2.baidu.com/it/u=748789577,3131543342&fm=253&fmt=auto&app=138&f=JPEG');
  width: 23%;
  height: 130px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 130px;
  cursor: pointer;
}
.box-card {
  .row {
    display: flex;
    justify-content: space-between
  }
}
</style>
